<template>
  <div class="container">
    <div class="reg-detail" v-show="showDetail">
      <div class="weui_cells_title">诊疗号：</div>
      <div class="weui_cells weui_cells_access" style="margin-top:10px;">
        <a @click="selectCard" class="weui_cell" href="javascript:;">
          <div class="weui_cell_hd">
            <i class="fa fa-credit-card fa-2x icon-color" style="width:45px;margin-right:5px;display:block;"></i>
          </div>
          <div class="weui_cell_bd weui_cell_primary">
            <p>{{order.cardName}}</p>
            <p>{{order.cardNum}}</p>
          </div>
          <div v-show="canSelectCard" class="weui_cell_ft">
            选诊疗号
          </div>
        </a>
      </div>
      <div class="weui_cells_title">预约订单详情：</div>
      <div class="weui_cells">
        <!-- <div class="weui_cell">
          <div class="weui_cell_bd weui_cell_primary">
            <p>
              <span class="label">订&nbsp;&nbsp;单&nbsp;&nbsp;号</span>
              <span class="info">{{order.num}}</span>
            </p>
          </div>
        </div> -->
        <div class="weui_cell">
          <div class="weui_cell_bd weui_cell_primary">
            <p>
              <span class="label">科&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;室</span>
              <span class="info">{{order.deptName}}</span>
            </p>
          </div>
        </div>
        <div class="weui_cell">
          <div class="weui_cell_bd weui_cell_primary">
            <p>
              <span class="label">医&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;生</span>
              <span class="info">{{order.doctorName}}</span>
            </p>
          </div>
        </div>
        <div class="weui_cell">
          <div class="weui_cell_bd weui_cell_primary">
            <p>
              <span class="label">号&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;类</span>
              <span class="info">{{order.regType}}</span>
            </p>
          </div>
        </div>
        <div class="weui_cell">
          <div class="weui_cell_bd weui_cell_primary">
            <p>
              <span class="label">预约日期</span>
              <span class="info">{{order.bookDate}}</span>
            </p>
          </div>
        </div>
        <div class="weui_cell">
          <div class="weui_cell_bd weui_cell_primary">
            <p>
              <span class="label">预约时间</span>
              <span class="info">{{order.spanStartTime.substr(11,5)}} - {{order.spanEndTime.substr(11,5)}}</span>
            </p>
          </div>
        </div>
        <div class="weui_cell">
          <div class="weui_cell_bd weui_cell_primary">
            <p>
              <span class="label">预约手机</span>
              <span class="info">
                <input class="weui_input" v-model="bookCellphone" style="width:60%;" maxlength="11" type="tel" placeholder="请输入预约手机号码">
              </span>
            </p>
          </div>
        </div>
      </div>
      <a @click="doBook" href="javascript:;" style="margin:10px 8px;" class="weui_btn weui_btn_primary">确认预约</a>
      <!-- <div>
        <p style="padding:10px;" class="am-ft-sm am-ft-gray">
          <span class="am-ft-orange"><i class="fa fa-info-circle"></i></span> 请提前至少20分钟到自助终端服务区或挂号处、收费处报到。逾时未报到，需重新挂号。
        </p>
      </div> -->
    </div>
    <div class="reg-success" v-show="showSuccess">
      <div class="weui_msg">
        <div class="weui_icon_area"><i class="weui_icon_success weui_icon_msg"></i></div>
        <div class="weui_text_area">
          <h2 class="weui_msg_title">预约成功</h2>
          <p class="weui_msg_desc">
            <span style="display: block;align-content: left;">预约编号：<span class="am-ft-sm am-ft-blue">{{bookNo}}</span></span>
            <span style="display: block;align-content: left;">医生：<span class="am-ft-sm am-ft-blue">{{order.doctorName}}</span></span>
            <span style="display: block;align-content: left;">预约科室：<span class="am-ft-sm am-ft-blue">{{order.deptName}}</span></span>
            <span style="display: block;align-content: left;">诊疗号：<span class="am-ft-sm am-ft-blue">{{order.cardNum}}</span></span>
            <span style="display: block;align-content: left;">姓名：<span class="am-ft-sm am-ft-blue">{{order.cardName}}</span></span>
            <span style="display: block;align-content: left;">预约日期：<span class="am-ft-sm am-ft-blue">{{order.bookDate}} {{order.spanStartTime.substr(11,5)}} - {{order.spanEndTime.substr(11,5)}}</span></span>
            <p style="padding:10px;" class="am-ft-sm am-ft-gray">
              <span class="am-ft-orange"><i class="fa fa-info-circle"></i></span> 请提前至少20分钟到自助终端服务区或挂号处、收费处报到。逾时未报到，需重新挂号。
            </p>
            <div style="padding-top:20px;">
              <figure style="margin: 0.2em 0.5em;">
                <img style="width: 100%;" src="../../assets/img/nonghangerweima.jpg" />
              </figure>
            </div>
            <p style="align-content: center;">长按图片关注中国农业银行顺德分行微信公众号</p>
          </p>
        </div>
        <div class="weui_opr_area">
          <p class="weui_btn_area">
            <a href="javascript:;" @click="goSearchBookInfo" class="weui_btn weui_btn_primary">查看预约记录</a>
          </p>
        </div>
      </div>
    </div>
    <div class="reg-failed" v-show="showFailed">
      <div class="weui_msg">
        <div class="weui_icon_area"><i class="weui_icon_warn weui_icon_msg"></i></div>
        <div class="weui_text_area">
          <h2 class="weui_msg_title">预约失败</h2>
          <p class="weui_msg_desc">{{failedMsg}}</p>
        </div>
        <div class="weui_opr_area">
          <p class="weui_btn_area">
            <a href="javascript:;" @click="gotoPortal" class="weui_btn weui_btn_primary">返回首页</a>
          </p>
        </div>
      </div>
    </div>
    <partial name="footer-copyright"></partial>
  </div>
</template>
<style scoped>
.weui_msg_desc label {
  width: 80px;
  display: inline-block;
}

.weui_msg_desc span {
  color: #0ae;
  font-weight: bolder;
}

span.label {
  display: inline-block;
  width: 80px;
}

span.info {
  color: #0ae;
}

.blue_tag {
  background-color: #0ae;
  color: #fff;
  font-size: 13px;
  padding: 2px 4px;
  border: none;
  vertical-align: middle;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}
</style>
<script>
import {
  setDefaultBookCard,
  setBookOrderNum,
  clearBookCard,
  showCommonToast,
  hideCommonToast,
  showLoadingToast,
  hideLoadingToast
} from '../../vuex/actions'

export default {
  name: 'BookInfoConfirmView',
  vuex: {
    getters: {
      order: ({ bookOrder }) => bookOrder
    },
    actions: {
      setDefaultBookCard,
      setBookOrderNum,
      clearBookCard,
      showCommonToast,
      hideCommonToast,
      showLoadingToast,
      hideLoadingToast
    }
  },
  data: function () {
    return {
      bookCellphone: '',
      bookNo: '',
      showDetail: true,
      showSuccess: false,
      showFailed: false,
      failedMsg: '',
      canBook: true,
      canSelectCard: true
    }
  },
  ready: function () {
    if (this.order.cardId === -1) {
      this.setDefaultBookCard()
    }

    this.getBookCellphone(this.order.cardNum)
  },
  route: {
    activate: function (transition) {
      // 阻止页面刷新，刷新时直接跳往首页
      if (transition.from.name === undefined) {
        this.$router.go({ name: 'portal' })
      } else {
        transition.next()
      }
    },
    deactivate: function (transition) {
      this.setBookOrderNum(-1, '')
      if (transition.to.name !== 'selectCard') {
        this.clearBookCard()
      }
      transition.next()
    }
  },
  methods: {
    selectCard: function () {
      if (!this.canBook || !this.canSelectCard) {
        return
      }
      this.$router.go({ name: 'selectCard' })
    },
    getBookCellphone: function (cardNo) {
      var self = this
      this.$ajax.get('GetClinPatientInfo', 'Card', { cardNo: cardNo }).then(function (data) {
        if (data.ResultCode === '0') {
          self.bookCellphone = data.ClinPatientInfo.Phone
        }
      })
    },
    doBook: function () {
      if (!this.canBook) {
        return
      }

      if (this.order.cardId === -1) {
        this.showCommonToast({ msg: '请选择诊疗号' })
        return
      }

      if (this.bookCellphone === '') {
        this.showCommonToast({ msg: '请填写预约的手机号码！' })
        return
      }

      if (!(/^1[3|4|5|7|8]\d{9}$/.test(this.bookCellphone))) {
        this.showCommonToast({ msg: '手机号码格式不正确！' })
        return
      }

      this.canBook = false

      var self = this

      this.showLoadingToast({ msg: '正在预约...' }, false)

      this.$ajax.get('CreateBookOrder', 'Book', {
        cardId: this.order.cardId,
        deptId: this.order.deptId,
        deptName: this.order.deptName,
        doctorId: this.order.doctorId,
        doctorName: this.order.doctorName,
        parentScheduleId: this.order.parentScheduleId,
        scheduleId: this.order.scheduleId,
        subjectId: this.order.subjectId,
        spanStartTime: this.order.spanStartTime,
        spanEndTime: this.order.spanEndTime,
        regType: this.order.regType,
        regAmt: this.order.regAmt,
        bookCellphone: this.bookCellphone
      }, false).then(function (data) {
        if (data.ResultCode !== '0') {
          self.failedMsg = data.ResultMsg
          self.showDetail = false
          self.showSuccess = false
          self.showFailed = true
          self.hideLoadingToast()
        } else {
          self.bookNo = data.BookNo
          self.setBookOrderNum(data.OrderId, data.OrderNo)
          self.showDetail = false
          self.showSuccess = true
          self.showFailed = false
          self.hideLoadingToast()
        }
      })
    },
    gotoPortal: function () {
      this.$router.replace({ name: 'portal' })
    },
    goSearchBookInfo: function () {
      this.$router.replace({ name: 'searchBookInfo' })
    }
  }
}
</script>
